<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import WidgetBase from './WidgetBase.vue'
  import PubParent from './PubParent.vue'
  import SwiperItem from './SwiperItem.vue'

  export default {
    name: 'w-swiper',
    mixins: [WidgetBase, PubParent],
    props: ['arrow', 'indicatorDots', 'duration'],
    data() {
      return {
        focusIndex: null,
      }
    },
    watch: {
      current(v) {
        this.setFocus(v)
      },
    },
    methods: {
      //@a -> key, index
      setFocus(a) {
        let s = this.slots_children()
        let c = s.findIndex(v => this.isCurrentChild(a, v))
        this.focusIndex = c
      },
      clickArrow(a) {
        this.focusIndex += a
      },
      clickIndicator(a) {
        this.focusIndex = a
      },
      html_slots() {
        if (this.focusIndex == null) {
          this.setFocus(this.x.current)
        }
        let v = this.x.vertical
        let a = v ? 'up' : 'left'
        let b = v ? 'down' : 'right'
        return [
          h('div', {
            class: 'w-swiper-cont',
            ref: 'cont',
          }, this.$slots),
          this.x.arrow && h('div', {
            class: 'w-swiper-arrow z-' + a,
            onclick: e => this.clickArrow(-1)
          }, h('i', {
            class: 'f-i f-i-angle-' + a
          })),
          this.x.arrow && h('div', {
            class: 'w-swiper-arrow z-' + b,
            onclick: e => this.clickArrow(1)
          }, h('i', {
            class: 'f-i f-i-angle-' + b
          })),
          this.x.indicatorDots && h('div', {
            class: 'w-swiper-indicator f-flex-center',
          }, this.slots_children().map((v, i) => h('div', {
            class: 'w-swiper-indicator-dot' + (i == this.focusIndex ? ' z-on' : ''),
            onclick: e => this.clickIndicator(i)
          })))
        ]
      }
    },
    computed: {
      html_class() {
        let i = this.focusIndex
        return {
          'z-at-first': i == 0,
          'z-at-last': i > -1 && i == this.slots_children().length - 1
        }
      },
      html_style() {
        let i = this.focusIndex
        return {
          '--w-swiper-translate-x': (-i * 100) + '%',
          '--w-swiper-transition': this.x.duration ? `transform ${this.x.duration}ms` : 0,
        }
      }
    },
    mounted() {
      if (this.$refs.cont) {
        new MutationObserver(() => {
          this.setFocus(this.x.current)
        }).observe(this.$refs.cont, {
          childList: true
        })
      }
    }
  }
</script>

<style>
  .w-swiper {
    position: relative;
    box-sizing: border-box;
  }

  .w-swiper-cont {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .w-swiper-item {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
    transform: translateX(var(--w-swiper-translate-x));
    transition: var(--w-swiper-transition);
  }

  .w-swiper-item>* {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .w-swiper.z-at-first>.w-swiper-arrow.z-left,
  .w-swiper.z-at-last>.w-swiper-arrow.z-right,
  .w-swiper.z-at-first>.w-swiper-arrow.z-up,
  .w-swiper.z-at-last>.w-swiper-arrow.z-down {
    display: none
  }

  .w-swiper-arrow {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    cursor: pointer
  }

  .w-swiper-arrow.z-left {
    width: 40px;
    right: auto
  }

  .w-swiper-arrow.z-right {
    width: 40px;
    left: auto
  }

  .w-swiper-arrow.z-up {
    height: 40px;
    bottom: auto
  }

  .w-swiper-arrow.z-down {
    height: 40px;
    top: auto
  }

  .w-swiper-arrow .f-i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    color: #ccc
  }

  .w-swiper-arrow:hover {
    background: rgba(0, 0, 0, .1)
  }

  .w-swiper-arrow:hover .f-i {
    color: #fff
  }

  .w-swiper-indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    text-align: center
  }

  .w-swiper-indicator-dot {
    width: 9px;
    height: 9px;
    margin: 0 4px;
    background-color: #bbb;
    border-radius: 10px;
    vertical-align: middle;
    cursor: pointer
  }

  .w-swiper-indicator-dot.z-on {
    background-color: #333
  }
</style>
